<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="newtemplatesfiles5/img/favicon.html">

    <link rel="stylesheet" href="asserts/css/swiper-bundle.min.css">


    <title>监督员举报违规</title>

    <!-- Bootstrap core CSS -->
    <link href="newtemplatesfiles5/css/bootstrap.min.css" rel="stylesheet">
    <link href="newtemplatesfiles5/css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="newtemplatesfiles5/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="newtemplatesfiles5/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" href="newtemplatesfiles5/css/owl.carousel.css" type="text/css">
    <!-- Custom styles for this template -->
    <link href="newtemplatesfiles5/css/style.css" rel="stylesheet">
    <link href="newtemplatesfiles5/css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="newtemplatesfiles5/js/html5shiv.js"></script>
    <script src="newtemplatesfiles5/js/respond.min.js"></script>
    <![endif]-->
<!--弹出框style-->
    <style>
        /*弹出层*/
        #popBox {
            display: none;
            background-color: black;
            z-index: 11;
            width: 500px;
            height: 500px;
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin:auto;
        }

        #popBox .close{
            text-align: right;
            margin-right: 5px;
            background-color: #F8F8F8;
        }

        /*关闭按钮*/
        #popBox .close a {
            text-decoration: none;
            color: red;
        }

        #popBox .auto {
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 50px;

        }

    </style>

</head>

<body>

<section id="container" class="">
    <!--header start-->
    <div th:insert="common/superviser-common-header::top"></div>
    <!--header end-->
    <!--sidebar start-->
    <div th:insert="common/superviser-common-sidebar::#left"></div>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <div class="row">
                <div class="col-lg-2">
                    <div id="popLayer"></div>
                    <div id="popBox">
                        <div class="close">
                            <a href="javascript:void(0)" onclick="closeBox()">关闭</a>
                        </div>
                        <div class="auto">
                            <video id="video" width="400" height="400" autoplay></video>
                            <canvas id="canvas" width="400" height="400" style="display: none;"></canvas>
                        </div>
                        <button id="jixuScan" class="btn btn-danger" style="display: none;" onclick="jixuScan()">开始扫描</button>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div>
                        <div>
                            <label>手机拍照上传二维识别</label>
                            <form id="phoneForm">
                                <input id="phoneQRcode" name="file" type="file" accept="image/*" capture="camera" />
                            </form>
                            <button onclick="phoneSubmit()" class="btn btn-danger">识别</button>
                        </div>
                    </div>
                    <form id="superviseForm">
                        <div class="form-group">
                            <label>违规车辆牌照号码:</label>
                            <div>

                                    <input name="ebickID" type="text" th:value="${session.scanEbick eq null ? '' : session.scanEbick.ebickID}" class="form-control" placeholder="">
                                    <img width="38px" src="asserts/img/scan.jpg" alt="图片加载失败" onclick="popAndshibie()">

                            </div>
                        </div>
                        <div class="form-group">
                            <label>违规类型:</label><br/>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="superviseType" value="违规停车" checked>
                                <label class="form-check-label">违规停车</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check‐input" type="radio" name="superviseType" value="乱拔他人充电电动车">
                                <label class="form-check-label">乱拔他人充电电动车</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check‐input" type="radio" name="superviseType" value="违反基本交通规则">
                                <label class="form-check-label">违反基本交通规则</label>
                            </div>
                        </div>
                        <div class="form‐group">
                            <label>详情:</label>
                            <input type="text" name="details" class="form-control" placeholder="比如，事情的经过、地点等信息">
                        </div>
                        <br>
                        <div class="form-group">
                            <label>上传照片:</label><br>
                            <img id="show" width="200px" src="" alt=""><br>
                            <input type="file" id="myfile" name="image"  onchange="showImage()">
                        </div>
                        <br>
                        <div class="form-group">
                            <label>操作类型:</label><br/>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="operationType" value="提醒纠正" checked>
                                <label class="form-check-label">提醒纠正</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check‐input" type="radio" name="operationType" value="举报上传">
                                <label class="form-check-label">举报上传</label>
                            </div>
                        </div>
                    </form>
                    <button class="btn btn-primary" onclick="superviseFormSubmit()">添加</button>
                </div>
                <div class="col-lg-2"></div>
            </div>
        </section>
        <!--main content end-->
    </section>

</section>
<!-- js placed at the end of the document so the pages load faster -->
<script src="newtemplatesfiles5/js/jquery.js"></script>
<script src="newtemplatesfiles5/js/bootstrap.min.js"></script>
<script src="newtemplatesfiles5/js/jquery.scrollTo.min.js"></script>
<script src="newtemplatesfiles5/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="newtemplatesfiles5/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="newtemplatesfiles5/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="newtemplatesfiles5/js/owl.carousel.js" ></script>
<script src="newtemplatesfiles5/js/jquery.customSelect.min.js" ></script>

<!--common script for all pages-->
<script src="newtemplatesfiles5/js/common-scripts.js"></script>

<!--script for this page-->
<script src="newtemplatesfiles5/js/sparkline-chart.js"></script>
<script src="newtemplatesfiles5/js/easy-pie-chart.js"></script>
<!--swiper js-->
<script src="js/swiper-bundle.min.js"> </script>
<script type="text/javascript">
    //图片回显
    function showImage() {
        var reader = new FileReader();
        var file = document.getElementById("myfile").files[0];
        console.log(file);
        reader.onload=function (e) {
            ///console.log(this.result);
            document.getElementById('show').src=this.result;
        };
        reader.readAsDataURL(file);
    }



    //表单提交
    function superviseFormSubmit() {
            var form = new FormData(document.getElementById("superviseForm"));

            $.ajax({
                url:"superviserUploadSuperviseForm.do",
                type:"post",
                dataType:"html",
                data:form,
                cache:false,
                processData:false,
                contentType:false,
                success: function (data) {
                    if(data == "success"){
                        alert("举报成功! 等待验证");
                        location.href="superviser-ToSupervise.do";
                    }else{
                        alert(data);
                    }

                    //location.href="showMySupervise.do";

                },
                error:function (data) {
                    alert("上传失败");
                }
            })
    }
</script>
<!--弹出框js-->
<script>

    function jixuScan(){
        shibie();
    }

    document.getElementById("video").onplaying=function(){
        console.log("canvas  change");
        //shibie();
        document.getElementById("jixuScan").style.display="block";
    }

    function popAndshibie(){
        open();
        popBox();
    }

    /*点击弹出按钮*/
    function popBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "block";
        popLayer.style.display = "block";
    };


    /*点击关闭按钮*/
    function closeBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
        document.getElementById("jixuScan").style.display="none";
    }
</script>


<!--scan js-->
<script>
    var file ,stream;
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);
        stream = stream;
        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    function open(){
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            //调用用户媒体设备, 访问摄像头
            getUserMedia({video : {width: 400, height: 400}}, success, error);
        } else {
            alert('不支持访问用户媒体');
        }
    }
    // base64转文件

    /*document.getElementById('capture').addEventListener('click', function () {
        for(var i = 0 ; i < 7 ; i++){
            getAImage();
            var res =submicQR();
            //alert();
            if(res != "error"){
                break;
            }
            var now = new Date();
            var newnow=new Date();
            console.log(now);
            console.log(newnow)
            while(newnow < now + 2000){
                newnow  = new Date();
                console.log("new  "+newnow)
            }
        }
        location.href=res;
    })*/

    function shibie(){
        var res;
        for(var i = 0 ; i < 5 ; i++){
            getAImage();
            res =submicQR();
            //alert();
            if(res != "error"){
                break;
            }
            var now = new Date();
            var newnow=new Date();
            console.log(now);
            console.log(newnow)
            while(newnow < now + 3000){
                newnow  = new Date();
                console.log("new  "+newnow)
            }
        }
        if(res != "error"){
            console.log(res+"&toWhere=superviser-supervise");
            alert("识别成功");
            location.href=res+"&toWhere=superviser-supervise";
        }else{
            alert("扫描失败");
        }

    }

    function getAImage() {

        context.drawImage(video, 0, 0, 480, 320);
        // 获取图片base64链接
        var image = canvas.toDataURL('image/png');

        //将图片添加到页面中
        //document.body.appendChild(img);
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            file = new File([u8arr], filename, {type: mime});
            return new File([u8arr], filename, {type: mime});
        }
        console.log(dataURLtoFile(image, 'aa.png'));
    }

    function submicQR(){
        var formData = new FormData();
        formData.append("file",file);
        var res = "error";
        $.ajax({
            type: "POST", // 数据提交类型
            url: "user-shibieQR.do", // 发送地址
            data: formData, //发送数据
            async: false, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false,
            success:function(data){
                //alert("ajax success");
                //stream.getTracks()[0].stop();//结束关闭流
                //location.href=data;
                res = data;
                console.log("ajax "+res);
            },
            error:function(e){
                //alert("识别失败");
                //stream.getTracks()[0].stop();//结束关闭流
                //alert("ajax error")
                res = "error";
            }
        });
        console.log("res "+res);
        return res;

    }



    function phoneSubmit() {

        var formData = new FormData(document.getElementById("phoneForm"));
        $.ajax({
            type: "POST", // 数据提交类型
            url: "user-shibieQR.do", // 发送地址
            data: formData, //发送数据
            async: false, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false,
            success:function(data){
                if(data!="error"){
                    console.log(data+"&toWhere=superviser-supervise");
                    location.href=data+"&toWhere=superviser-supervise";
                    alert("识别成功");
                }else{
                    alert("识别失败");
                }
            },
            error:function(e){
                alert("上传失败");
            }
        });

    }
</script>
</body>
</html>
